<template>
    <div class="ambulance_list_dialog">
        <el-dialog v-model="isShowVenueAmbu" title="车辆信息" width="50%" :close-on-click-modal="false"
            :destroy-on-close="true">
            <el-tabs v-model="activeTypeNameAmbu" class="demo-tabs" @tab-click="handleTabTypeClick">
                <el-tab-pane label="车辆" name="ambufirst">
                    <!-- <el-button type="" @click="handleAmbulancePosition">查看车位置</el-button> -->
                    <el-input v-model="ambulance" placeholder="请输入车牌号" clearable @input="HSearchAmbulance"></el-input>
                    <el-table :data="ambulanceTableDataCopy" style="width: 100%" height="500">
                        <el-table-column prop="Name" label="车牌号码" />
                        <el-table-column prop="StateName" label="状态" />
                        <el-table-column prop="Telephone" label="车载电话" />
                        <el-table-column prop="IsOnline" label="是否在线" />
                        <el-table-column prop="Doctor" label="医生" />
                        <el-table-column prop="Nurse" label="护士" />
                        <el-table-column prop="Driver" label="司机" />
                        <el-table-column prop="Stretcher" label="担架员" />
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
// 这里可以导入其他文件(比如: 组件、工具js、第三方插件js、json文件、图片文件...)
// 例如: import <组件名称> from '<组件路径>';
import { ref, reactive, toRefs, watch } from 'vue'
export default {
    // import 引入的组件需要注入到对象中才能使用
    components: {},
    props: ['showVenueAmbuFlag', 'venueAmbuData'],
    setup(props, ctx) {
        // console.log(ctx)
        /**
         * 状态
         */
        const compState = reactive({
            isShowVenueAmbu: false,
            activeTypeNameAmbu: "ambufirst",
            ambulanceTableData: [],
            ambulanceTableDataCopy: [],
            ambulance: ''
        })
        watch([() => props.showVenueAmbuFlag], ([newV]) => {
            // console.log('props.showVenueAmbuFlag', newV)
            // console.log('props.venueAmbuData', props.venueAmbuData)
            // compState.ambulanceTableData = props.venueAmbuData
            compState.ambulanceTableDataCopy = [...props.venueAmbuData]
            compState.isShowVenueAmbu = true
        })
        /**
         * 事件
         */

        // 筛选车辆
        const HSearchAmbulance = () => {
            compState.ambulanceTableDataCopy = props.venueAmbuData.filter((item) => {
                // console.log(item);
                return item.Name.search(compState.ambulance) != -1;
            });
        };
        const handleClose = () => {
            compState.isShowVenueAmbu = false
            compState.activeTypeNameAmbu = 'ambufirst'
        }
        const handleTabTypeClick = () => {
            console.log("handleTabTypeClick")
        }
        const handleAmbulancePosition = () => {

        }
        const refState = toRefs(compState);
        return {
            // return 解构后的状态
            ...refState,
            // return 事件
            handleClose,
            handleTabTypeClick,
            handleAmbulancePosition,
            HSearchAmbulance
        }
    }
}
</script>
<style scoped></style>